import { ActivityIndicator, ScrollView, Text, View } from "react-native";
import tw from "twrnc"
import Icon from 'react-native-vector-icons/Fontisto';
import AntIcon from 'react-native-vector-icons/AntDesign';
import { Modal, RadioButton } from "react-native-paper";
import { useEffect, useState } from "react";
import { router } from "expo-router";

export default function Login() {
  const [isChecked, setIsChecked] = useState(false);

  const containerStyle = {
    backgroundColor: "white",
    padding: 10,
    height: 300,
    margin: 50,
    borderRadius: 10,
  };

  /* 协议 */
  const [agreementVisible, setAgreementVisible] = useState(false);

  const showAgreementModal = () => {
    setAgreementVisible(true);
  };

  const hideAgreementModal = () => {
    setAgreementVisible(false);
  };

  const handleAgree = () => {
    setIsChecked(true);
    setAgreementVisible(false);
  }

  const handleDisagree = () => {
    setIsChecked(true);
    setAgreementVisible(false);
  }

  const handleOneClickLogin = () => {
    if (isChecked) {
      router.push('/(tabs)');
    } else {
      showAgreementModal();
    }
  }

  /* 验证 */
  const [isVerifying, setIsVerifying] = useState(true);

  const handleVerify = () => {
    setTimeout(() => {
      setIsVerifying(false);
    }, 2000);
  }
  const hideVerifyingModal = () => {
    setIsVerifying(false);
  }

  useEffect(() => {
    handleVerify();
  },[])


  return (
    <View style={tw`flex-1`}>
      <View style={tw`items-center`}>
        <View style={tw`flex-row items-center justify-center  rounded-md w-30 h-30 bg-teal-300 mt-30`}>
          <Icon name="twitch" size={50}
            style={tw` border-slate-300 p-1 text-white`}
          />
        </View>
        <Text style={tw`text-2xl font-bold mt-4`}>沟通无障碍 交友无国界</Text>

        <View style={tw`mt-20`}>
          <Text style={tw`font-bold text-xl`}>182****3150</Text>
        </View>
      </View>

      <View style={tw`items-center`}>
        <View style={tw`flex-row items-center justify-center mx-8`}>
          <RadioButton
            value={String(isChecked)}
            status={isChecked ? "checked" : "unchecked"}
            onPress={() => { setIsChecked(!isChecked); }}
            color="#26EBD7" // 选中时的颜色
          />
          <View>
            <Text>
              登录即同意
              <Text style={tw`text-teal-300`}>《WorldTalks用户协议》</Text>
              和
              <Text style={tw`text-teal-300`}>《WorldTalks隐私权政策》</Text>
              并使用本机号码登录
            </Text>
          </View>
        </View>
      </View>


      <View style={tw`flex items-center justify-center mt-30`}>
        <View style={tw`w-40  rounded-full my-1.5 p-3 bg-teal-300`}>
          <Text style={tw`text-center`} onPress={handleOneClickLogin}>一键登录</Text>
        </View>
        <Text style={tw`text-teal-300`} onPress={() => { router.push('/(auth)/pwd-login') }}>密码登录</Text>
      </View>


      <View style={tw`flex items-center justify-center absolute bottom-2 left-0 right-0`}>
        <Text style={tw`text-slate-400`}>--更多方式登录--</Text>
        <View style={tw`flex-row items-center justify-center my-1.5 p-3`}>
          <AntIcon name="QQ" size={30} style={tw`mx-2`} />
          <AntIcon name="wechat" size={30} style={tw`mx-2`} />
        </View>
      </View>



      {/*隐私政策与用户协议 */}
      <Modal visible={agreementVisible} onDismiss={hideAgreementModal} contentContainerStyle={containerStyle} >
        <View style={tw`flex-1 justify-center py-2`}>
          <Text style={tw`text-center text-2xl font-bold mb-5`}>隐私政策与用户协议</Text>
          <ScrollView style={tw`px-3`}>
            <Text>亲爱的用户，感谢您信任并使用WorldTalk!</Text>
            <Text>我们依据相关法律法规要求制定了《WorldTalk用户协议》和《WorldTalk隐私权政策》，请您在点击同意前仔细阅读并充分理解相关条款，尤其是以颜色或加粗进行标识的重要条款。为便于您理解《WorldTalk隐私权政策》，特向您说明如下当您注册WorldTalk服务时，我们会收集您的唯一设备识别码(MEVAndroIdID/IDFA/OPENUDID，GUID/IP地址/SIM卡MS信息/ICCID信息)，用于标识您为WorldTalk的用户。如果您使用O0、微信、Facebook、Gooale关联登录WorldTalk，我们会收集您QQ、微信、Facebook 或 Google的唯一标识，用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数数据。在您使用第三方帐号注册或登录后，您的第三方帐号将会与WorldTalk帐号进行绑定。</Text>
            <Text>当您创建WorldTalk ID时，我们会收集您的个人信息，包括性别，年龄，国籍，您的母语和您正在学习的语言，将有助于我们为您提供更好的服务和体验。</Text>
            <Text>我们会收集您的出生日期(年月日)，并保护未成年人的隐私与安全，在App内将成年人和未成年人完全阻绝开，不能相互交流。</Text>
            <Text>我们会收集您的性别信息，旨在帮助用户根据个人偏好筛选合适的语言交流伙伴，有些用户更倾向于选择与自己同性别的语伴沟通，这也是我们的核心功能。</Text>
            <Text>我们会收集您的手机号码，用于校验您的用户信息。手机号码属于敏感信息，收集手机号码是为了满足相关法律法规的网络实名制要求。若您拒绝提供手机号码，则会影响您在WorldTalk上的正常使用。</Text>
          </ScrollView >
          <View style={tw`flex-row items-center justify-center my-2`}>
            <View style={tw`bg-teal-300 p-2 rounded-md w-24 h-10 mx-8px`}><Text style={tw`text-center`} onPress={handleDisagree}>不同意</Text></View>
            <View style={tw`bg-teal-300 p-2 rounded-md w-24 h-10 mx-8px`}><Text style={tw`text-center`} onPress={handleAgree}>同意</Text></View>
          </View>
        </View>
      </Modal>


      {/* 验证中 */}
      <Modal visible={isVerifying} onDismiss={hideVerifyingModal} contentContainerStyle={containerStyle} >
        <View style={tw`flex-1 justify-center py-2`}>
          <Text style={tw`text-center text-2xl font-bold mb-5`}>验证中</Text>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      </Modal>


    </View>

  );
}
